<template>
  <div class="user-box">
    <s-header :name="'修改昵称'"></s-header>
    <div class="input-item">
      <van-cell-group>
        <van-field v-model="title" label="昵称" placeholder="请输入昵称"/>
      </van-cell-group>

      <van-button class="save-btn" color="#1baeae" type="primary" @click="onSave" block>保存修改</van-button>

    </div>
  </div>
</template>


<script>
import sHeader from '@/components/SimpleHeader'
import {Toast} from 'vant'

export default {
  components: {
    sHeader
  },
  data() {
    return {
      title: '',
      id: ''
    }
  },
  created() {
    this.id = this.$cookies.get('id')
  },
  methods: {
    onSave() {
      this.$axios.put(this.$settings.BASE_URL + 'userinfo/title/' + this.id + '/', {
        title: this.title
      }, {headers: {'Authorization': 'jwt ' + this.$cookies.get('token')}}).then(res => {
        if (res) {
          if (res.code == 100) {
            Toast.success('修改成功')
            this.$router.go(-1)
          } else {
            Toast.fail('修改失败')
            this.$router.go(-1)
          }
        }
      })
    }
  }
}
</script>


<style lang="less" scoped>
@import '../common/style/mixin';

.user-box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  .fj();
  .wh(100%, 44px);
  line-height: 44px;
  padding: 0 10px;
  .boxSizing();
  color: #252525;
  background: #fff;
  border-bottom: 1px solid #dcdcdc;

  .input-item {
    margin-top: 44px;
  }

  .save-btn {
    width: 80%;
    margin: 100px auto;
    margin-left: 55px
  }
}

</style>
